<template>
	<view>
		<block v-if="search">
			<!-- 搜索没有内容的时候显示的区域 -->
			<view v-if="dataList.length === 0 && !searchState && !requestState && searchDataState"
				class="noSearchAttention">
				<van-empty image="search" :description="searchText"></van-empty>
			</view>
		</block>
		<!-- 加载中 -->
		<view v-show="requestState && !pagingState && !pullDownState" class="serachLoading">
			<van-loading size="38rpx"><text style="font-size: 30rpx;">加载中...</text></van-loading>
		</view>
		<!-- 没有内容的时候显示的区域 -->
		<view v-if="dataList.length === 0 && !pullDownState && !requestState && !searchDataState" class="noAttention">
			<van-empty :description="text"></van-empty>
		</view>
		<!-- 分页加载中 -->
		<view v-if="pagingState" class="paging">
			<van-loading size="38rpx"><text style="font-size: 30rpx;">加载中...</text></van-loading>
		</view>
		<!-- 数据加载完毕的时候显示 -->
		<view v-if="totalPageNumber > 1 && pageNumber == totalPageNumber && !pagingState" class="noData">
			{{pagingOverText}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "scroll-loading",
		props: {
			search: {
				type: Boolean,
				required: true
			},
			searchState: {
				type: Boolean,
				default: false
			},
			pagingState: {
				type: Boolean,
				required: true
			},
			pullDownState: {
				type: Boolean,
				default: false
			},
			requestState: {
				type: Boolean,
				required: true
			},
			searchDataState: {
				type: Boolean,
				default: false
			},
			dataList: {
				type: Array,
				required: true
			},
			pageNumber: {
				type: Number,
				required: true
			},
			totalPageNumber: {
				type: Number,
				required: true
			},
			text: {
				type: String,
				default: "暂无内容"
			},
			searchText: {
				type: String,
				default: "暂无搜索结果"
			},
			pagingOverText: {
				type: String,
				default: "已全部加载"
			}
		}
	}
</script>

<style lang="scss">
	.noAttention {
		width: 100%;
		text-align: center;
		line-height: 200upx;
		color: #AEAEAE;
	}

	.noSearchAttention {
		width: 100%;
		text-align: center;
		line-height: 200upx;
		color: #AEAEAE;
	}

	.noData {
		width: 100%;
		text-align: center;
		padding: 0upx 0upx 35upx 0upx;
		color: #AEAEAE;
		font-size: 24upx;
	}

	.paging {
		width: 100%;
		margin: 20upx 0upx;
		text-align: center;
		color: #AEAEAE;
		font-size: 24upx;
	}

	.serachLoading {
		width: 100%;
		text-align: center;
		line-height: 200upx;
		color: #AEAEAE;
	}
</style>
